import React from 'react'
import {
  View,
  ScrollView,
  KeyboardAvoidingView,
  Text,
  TextInput,
  StyleSheet
} from 'react-native'
import { Button, Header, ListItem, Icon } from 'react-native-elements'
import { HeaderBack } from '~/components/header'
import ImageUploader from '~/components/image/uploader'

import { ListForwardColor } from '~/config/style'

class Component extends React.Component {
  constructor (props) {
    super(props)
  }

  render () {
    const { navigation } = this.props

    return (
      <View style={styles.view}>
        <Header
          leftComponent={ HeaderBack(navigation) }
          centerComponent={{text: '发布内容', style: {color: 'white'}}}
          // rightComponent={{text: '发布', style: {color: 'white'}}}
        />

        <KeyboardAvoidingView style={{flex: 1}} behavior={Platform.OS == "ios" ? "padding" : "height"}>
          <ScrollView style={styles.scrollview} showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1}}>
            <ListItem bottomDivider>
              <ListItem.Content>
                <ImageUploader></ImageUploader>
              </ListItem.Content>
            </ListItem>

            <ListItem bottomDivider>
              <TextInput
                placeholder="#添加内容"
                multiline={true}
                style={styles.input}
              ></TextInput>
            </ListItem>

            {this.renderAddr()}

            <View style={{flex: 1}}></View>
          </ScrollView>
        </KeyboardAvoidingView>

        <Button title="立即发布" style={styles.submit} />
      </View>
    )
  }

  // 添加地址
  renderAddr () {
    return (
      <ListItem>
        <Icon type="ionicon" name={'location-outline'} size={18}/>
        <ListItem.Content>
          <Text>所在位置</Text>
        </ListItem.Content>

        <Icon name="chevron-forward-outline" type='ionicon' size={16} color={ListForwardColor} />
      </ListItem>
    )
  }
}

const styles = StyleSheet.create({
  view: {
    flex: 1,
    backgroundColor: 'white',
  },
  scrollview: {
    // flex: 1,
    // position: "relative",
    // flexDirection: "row"
  },
  input: {
    flex: 1,
    color: '#2D3748',
    fontSize: 16,
    lineHeight: 22,
    textAlignVertical: 'top',
    minHeight: 240,
    maxHeight: 240,
  },
  submit: {
    marginHorizontal: 10,
    marginVertical: 10,
  }
})

export default Component